<template>
    <div class="person">
        <h1>中国</h1>
        <h2 ref="title2">北京</h2>
        <h3>昌平</h3>
        <button @click="showLog">输出h2元素</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref, defineExpose } from 'vue'

let title2 = ref() // 创建一个 title2,用于存储 ref 标记的内容
let a = ref(0)
let b = ref(1)
let c = ref(2)

function showLog() {
    // console.log(document.getElementById('title2'));
    console.log(title2.value);
}

defineExpose({ a, b })
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>
